<template>
  <div class="border-b mb-4 mt-2 pb-4 border-stone-300">
    <button class="flex p-0.5 hover:bg-stone-200 rounded transition-colors relative gap-2 w-full items-center">
      <img
        src="https://api.dicebear.com/9.x/notionists/svg"
        alt="avatar"
        class="size-8 rounded shrink-0 bg-violet-500 shadow"
      />
      <div class="text-start">
        <span class="text-sm font-bold block">Tom Is Loading</span>
        <span class="text-xs block text-stone-500">tom@hover.dev</span>
      </div>
      <ChevronDown class="absolute right-2 top-1/2 translate-y-[calc(-50%+4px)] text-xs" size="16" />
      <ChevronUp class="absolute right-2 top-1/2 translate-y-[calc(-50%-4px)] text-xs" size="16" />
    </button>
  </div>
</template>

<script setup lang="ts">
import { ChevronDown, ChevronUp } from 'lucide-vue-next';
// Logic for AccountToggle
</script>

<style scoped>
/* Styles for AccountToggle */
</style>